/* 
  全局样式重置（Normalize 核心目的）
  作用：消除不同浏览器默认样式差异（如Chrome和Firefox的默认margin/padding不同），确保全平台样式一致性
*/
* {
  margin: 0;        /* 清除所有元素默认外边距 */
  padding: 0;       /* 清除所有元素默认内边距 */
  box-sizing: border-box; /* 核心：宽高计算规则改为「内容+内边距+边框」，避免padding撑大元素（如设置width:200px，加padding后实际宽度仍为200px） */
}

/* 
  1. 左侧侧边栏样式优化（针对VuePress默认主题的.sidebar容器）
  目标：提升侧边栏视觉层次，优化交互反馈
*/
/* 侧边栏容器：固定宽度、添加轻微阴影、纯白背景（覆盖默认主题可能的透明/灰色背景） */
.sidebar {
  width: 260px !important; /* !important：强制覆盖默认主题的宽度（避免主题样式优先级更高），260px保证分类文字不换行 */
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05); /* 右侧轻微阴影：区分侧边栏与内容区，增加页面层次感（阴影透明度0.05，不突兀） */
  background: #fff !important; /* 纯白背景：提升文字对比度，增强可读性 */
}

/* 侧边栏菜单项：增加上下间距，避免拥挤 */
.sidebar-item {
  margin: 8px 0; /* 上下各8px间距，横向无间距，保证侧边栏紧凑但不拥挤 */
}

/* 侧边栏链接：优化内边距、圆角和颜色，提升点击体验 */
.sidebar-link {
  padding: 8px 16px !important; /* 内边距：上下8px、左右16px，扩大点击区域（提升移动端交互） */
  border-radius: 4px !important; /* 轻微圆角：弱化尖锐感，符合现代UI风格 */
  color: #333 !important; /* 文字颜色：深灰色（#333），比纯黑（#000）更柔和，减少视觉疲劳 */
}

/* 侧边栏链接 hover 状态：鼠标悬浮时的反馈样式 */
.sidebar-link:hover {
  background: rgba(66, 185, 131, 0.1) !important; /* 背景色：品牌色（#42b983）的10%透明色，呼应主题且不刺眼 */
  color: #42b983 !important; /* 文字色：切换为品牌色，明确提示当前hover的链接 */
}

/* 
  2. 右侧内容区样式优化（针对文档正文容器，提升阅读体验）
  目标：加宽内容区、优化文字排版、强化标题视觉
*/
/* 内容区容器（排除自定义内容）：加宽最大宽度，避免文字过短导致换行频繁 */
.theme-default-content:not(.custom) {
  max-width: 1200px !important; /* !important：覆盖默认主题的窄宽度（默认约740px），1200px适合长文档阅读（每行30-50字最佳） */
}

/* 内容区通用样式：优化内边距、行高和字体 */
.theme-default-content {
  padding: 28px 48px !important; /* 内边距：上下28px（与顶部导航栏间距协调）、左右48px（避免文字贴边） */
  line-height: 1.8; /* 行高：1.8倍字体高度，提升多行文字可读性（默认1.5偏紧凑） */
  font-size: 16px; /* 字体大小：16px为浏览器最佳阅读字号（避免过小导致近视） */
  color: #333; /* 文字颜色：深灰色，比纯黑柔和，长时间阅读更舒适 */
}

/* 页面标题样式：强化标题识别度 */
.page-title {
  margin-bottom: 24px; /* 底部间距：与正文保持24px距离，区分标题与内容 */
  padding-bottom: 12px; /* 底部内边距：为下划线预留空间 */
  border-bottom: 2px solid #42b983; /* 底部边框：品牌色粗边框，明确标题区域，提升视觉层次 */
  color: #333; /* 标题颜色：深灰色，与正文区分但不突兀 */
}

/* 
  3. 顶部导航栏样式优化（针对.navbar容器，提升导航交互体验）
  目标：固定高度、增加阴影、优化链接样式
*/
/* 导航栏容器：固定高度、底部阴影、纯白背景 */
.navbar {
  height: 64px; /* 固定高度：64px符合主流导航栏高度（兼顾桌面端点击区域和移动端适配） */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 底部阴影：区分导航栏与页面内容，增加层次感 */
  background: #fff !important; /* 纯白背景：覆盖默认主题可能的透明背景，提升导航栏辨识度 */
}

/* 导航栏菜单项：控制横向间距 */
.navbar-item {
  margin: 0 12px; /* 左右各12px间距，避免导航项过于拥挤（尤其是多语言和搜索框共存时） */
}

/* 导航栏链接：优化点击区域和颜色 */
.navbar-link {
  padding: 10px 16px !important; /* 内边距：扩大点击区域（上下10px、左右16px），提升移动端交互 */
  border-radius: 4px !important; /* 轻微圆角：与侧边栏链接风格统一，视觉更和谐 */
  color: #333 !important; /* 文字颜色：深灰色，与侧边栏一致 */
}

/* 导航栏链接 hover 状态：与侧边栏呼应，保持交互一致性 */
.navbar-link:hover {
  color: #42b983 !important; /* 文字色：切换为品牌色 */
  background: rgba(66, 185, 131, 0.1) !important; /* 背景色：品牌色透明色，与侧边栏hover样式统一 */
}

/* 
  4. 搜索框样式优化（针对搜索组件，提升输入体验）
  目标：调整宽度、优化输入框样式、增加聚焦反馈
*/
/* 搜索框容器：控制宽度，避免过宽或过窄 */
.search-box {
  width: 280px !important; /* !important：覆盖默认宽度，280px足够输入长搜索词（如"VuePress 多语言配置"） */
  margin-right: 12px; /* 右侧间距：与多语言下拉框保持12px距离，避免拥挤 */
}

/* 搜索输入框：优化高度、边框和内边距 */
.search-input {
  height: 38px !important; /* 高度：38px与导航栏高度（64px）比例协调，避免输入框过小 */
  border-radius: 4px !important; /* 圆角：与导航栏链接风格统一 */
  border: 1px solid #ddd !important; /* 边框：浅灰色（#ddd），未聚焦时不突兀 */
  padding: 0 12px !important; /* 内边距：左右12px，避免文字贴边 */
}

/* 搜索输入框聚焦状态：明确提示用户当前已激活输入 */
.search-input:focus {
  border-color: #42b983 !important; /* 边框色：切换为品牌色，明确聚焦状态 */
  box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2) !important; /* 外发光：品牌色20%透明阴影，强化聚焦反馈（类似浏览器默认:focus样式但更美观） */
}

/* 
  5. 多语言下拉框样式优化（针对.dropdown组件，提升下拉菜单体验）
  目标：调整宽度、优化阴影、统一hover样式
*/
/* 下拉菜单容器：控制最小宽度和阴影 */
.dropdown-menu {
  min-width: 120px !important; /* 最小宽度：120px足够显示"中文/English"文字，避免换行 */
  border-radius: 4px !important; /* 圆角：与其他组件风格统一 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; /* 阴影：比导航栏更深（0.15透明度），突出下拉菜单层级 */
}

/* 下拉菜单项：优化内边距和颜色 */
.dropdown-item {
  padding: 8px 16px !important; /* 内边距：上下8px、左右16px，扩大点击区域 */
  color: #333 !important; /* 文字颜色：深灰色，与导航栏一致 */
}

/* 下拉菜单项 hover 状态：与导航栏、侧边栏呼应 */
.dropdown-item:hover {
  background: rgba(66, 185, 131, 0.1) !important; /* 背景色：品牌色透明色 */
  color: #42b983 !important; /* 文字色：品牌色，明确hover状态 */
}

/* 
  6. 响应式适配（针对手机端，768px以下屏幕）
  目标：在小屏幕上调整布局，避免元素溢出或拥挤
*/
@media (max-width: 768px) { /* 断点：768px是平板与手机的分界，以下为手机端适配 */
  .sidebar {
    width: 220px !important; /* 侧边栏宽度：从260px缩小到220px，避免占满手机屏幕 */
  }
  .theme-default-content {
    padding: 16px 24px !important; /* 内容区内边距：从28px/48px缩小到16px/24px，适应手机窄屏幕 */
  }
  .search-box {
    width: 180px !important; /* 搜索框宽度：从280px缩小到180px，避免与多语言下拉框重叠 */
  }
}